<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7_3_1-2-返回式渲染</title>
</head>

<body>


    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="Application">
        <com name="组件名"></com>
    </div>
    <script>
        const App = Vue.createApp({})
        App.component("com", {
            setup(props, context) {
                let data = "setup的数据";
                let s = "s的数据";
                //https://www.yht7.com/news/170514
                //https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
                //返回渲染函数
                //创建虚拟 DOM 节点(vnodes)。
                return () => Vue.h('div', [data, s], "父传入到组件中的内容：" + props.name)//如何在这里显示外部props属性name的值呢

            },
            props: {
                name: String,
            }
        })
        App.mount("#Application")
    </script>
</body>

</html>